* {
  margin: 0;
  padding: 0;
}

body {
  background-color: beige;
  font-family:Arial, Helvetica, sans-serif;
  padding: 0 100px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: left;
}

h1 {
  font-size: 48px;
  text-align: center;
  /* margin-bottom: 50px; /* Added this line */ 
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
  font-size: 24px;
}

li {
  margin-bottom: 10px;
}

button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 10px 10px;
  cursor: pointer;
  background-color:green;  /* Green */
  max-width:  200px;
}

@font-face {
  font-family: 'digital-clock-font';
  src: url('../fonts/Orbitron-Regular.ttf') format('truetype');
}


.ctr_container {
  text-align:center;
  font-size: 24px;
}

.ctr_container_box {
  width: 800px;
  border: 5px solid black;
  padding: 10px;
  margin: 10px auto; /* Center the box horizontally */
  text-align: center; /* Center the text inside the box */
  font-size: 24px;
}

.ctr_list {
  text-align: center;
  list-style-position: inside;
}

.countdown {
  text-align: center;
  font-size: 48px;
  margin-top: 0px;
  font-family: 'digital-clock-font';
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-container > img {
  width: 500px;
  height: 500px;
  margin: 10px;  
  object-fit:contain;
}

.flex-container > div > img {
  width: 200px;
  height: 200px;
  margin: 10px;
  object-fit: contain;  
}

.flex-container > button {
  align-items: center; /* Vertically center content */
  /*min-height: 100vh; /* Make container full viewport height */
}

.picture {
  /*max-width: 60%; 
  /*height: auto; */
  width: 300px;
  height: 300px;
  object-fit: contain; /* Or object-fit: cover; */
  justify-content: center; /* Center horizontally */ 
  align-items: center; /* Center vertically */
}

.poster {
  /*max-width: 60%; 
  /*height: auto; */
  width: 512px;
  height: 512px;
  object-fit: contain; /* Or object-fit: cover; */
  justify-content: center; /* Center horizontally */ 
  align-items: center; /* Center vertically */
}


.benefit-container {
  display: flex; /* or grid for more complex layouts */
  gap: 20px; /* Space between cards */
}

.benefit-card {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center; /* Center content */
  flex: 1; /* Equal width for cards */
}

.benefit-card img {
    max-width: 100px; /* Adjust as needed */
    height: auto;
    margin-bottom: 10px;
}

.benefit-card h3 {
  margin-bottom: 10px;
}